<template>
  <div>
    <el-input v-model="key"></el-input>
    <div style="margin: 5px" v-if="!key">
      <h3 style="margin-top: 10px;">历史搜索</h3>
      <div ><el-button v-for="i in 8" :key="i" size="mini" style="margin: 3px;">奶茶</el-button></div>
      <h3 style="margin-top: 10px">热门搜索</h3>
      <div ><el-button v-for="i in 8" :key="i" size="mini" style="margin: 3px;">奶茶</el-button></div>
    </div>
    <div v-if="key">
      <el-dropdown>
    <span class="el-dropdown-link">
    综合排序<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>综合排序</el-dropdown-item>
          <el-dropdown-item>好评优先</el-dropdown-item>
          <el-dropdown-item>起送价最低</el-dropdown-item>
          <el-dropdown-item>配送最快</el-dropdown-item>
          <el-dropdown-item>配送费最低</el-dropdown-item>
          <el-dropdown-item>人均从低到高</el-dropdown-item>
          <el-dropdown-item>人均从高到低</el-dropdown-item>
          <el-dropdown-item>通用排序</el-dropdown-item>
        </el-dropdown-menu>
        <span style="margin-left: 20px">距离最近</span>
        <span style="margin-left: 20px">销量最高</span>
        <span style="margin-left: 20px">筛选</span>
      </el-dropdown>
      <el-row :gutter="30">
        <el-col :span="6" v-for="(tag,i) in tags" :key="i">
          <el-button size="small">{{tag}}</el-button>
        </el-col>
      </el-row>
      <el-card shadow="never">
        <el-row :gutter="10" v-for="i in 8" :key="i">
          <el-col :span="8">
            <el-image
              src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-image>
          </el-col>
          <el-col :span="15">
            <p @click="jump('/store')">店铺名称</p>
            <p>起送 ￥10 免配送费</p>
            <p>月售9999+ </p>
            <p>2.69km</p>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
    export default {
        name: "StoreSearch",
        data() {
            return {
                tags: ["津贴联盟", "会员红包", "满减优惠", "品质联盟"],
                list: [],
                key: null,
            }
        },
        methods: {
            jump(route) {
                this.$router.push(route);
            }
        }
    }
</script>

<style scoped>
  p {
    margin: -3px 0 8px;
  }
</style>
